<template>
  <view class="topic-detail">
    <view class="concern">
      <view class="item">
        <view class="nav-item">
          <view
            v-if="articleObj.cover"
            class="cover br10"
            :style="{ backgroundImage: 'url(' + articleObj.cover + ')' }"
          >
          </view>
          <view class="info">
            <view class="title t2"> {{ articleObj.title }} </view>
            <view class="intro">
              <u-parse :html="articleObj.content"></u-parse>
            </view>
          </view>
        </view>
      </view>
      <view class="article" v-if="articleObj.article_list.length">
        <view class="article-list">
          <view
            class="item"
            v-for="(v, i) in articleObj.article_list"
            :key="v.article_id"
            @click="HandleView(v.article_id)"
          >
            <view class="nav-item">
              <view
                class="cover br10"
                :style="{ backgroundImage: 'url(' + v.cover + ')' }"
              >
              </view>
              <view class="info">
                <view class="title t2">
                  {{ v.title }}
                </view>
                <view class="tag-list flex">
                  <view
                    class="padding-md"
                    v-for="(item, index) in v.label_list"
                    :key="index"
                  >
                    <view class="cu-tag sm light bg-purple">{{
                      item.title
                    }}</view>
                  </view>
                </view>
                <view class="tag-time flex-between">
                  <view class="eye"> {{ v.view_num }}阅读 </view>

                  <view class="time"> {{ v.create_at }} </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <ALoading v-show="aloading"></ALoading>
    <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import ALoading from "../../../components/loading/loading.vue"
export default {
  components: { ALoading },
  data() {
    return {
      id: "",
      aloading: true,
      articleObj: {},
    }
  },
  onLoad(options) {
    this.id = options.id
    if (this.id) {
      this.getTopicList()
    }
  },
  methods: {
    getTopicList() {
      let data = {
        id: this.id,
      }
      this.$store.dispatch("topic/item", data).then(res => {
        this.articleObj = res.data
        uni.setNavigationBarTitle({
          title: res.data.title,
        })
        this.aloading = false
      })
    },
    HandleView(id) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
// .concern {
//   padding: 0 20upx;
//   .item {
//     background: #fff;
//     margin: 20upx 0;
//     padding: 20upx;
//     box-sizing: border-box;
//     .nav-item {
//       width: calc(100vw - 80upx);
//       .cover {
//         position: relative;
//         width: 100%;
//         height: 40vw;
//         background-repeat: no-repeat;
//         background-size: 100% 100%;
//         .tag {
//           position: absolute;
//           right: 10upx;
//           top: 10upx;
//           text {
//             font-size: 20upx;
//             padding: 4upx 10upx;
//             line-height: 100%;
//             background: #f60;
//             color: #fff;
//             margin-left: 4upx;
//           }
//         }
//       }
//       .info {
//         margin-top: 10upx;
//         .title {
//           font-size: 24upx;
//           font-weight: 600;
//           line-height: 36upx;
//         }
//         .intro {
//           margin-top: 10upx;
//           line-height: 30upx;
//           font-size: 22upx;
//         }
//       }
//     }
//   }
// }
// .article-list {
//   .item {
//     display: flex;
//     background: #fff;
//     margin: 20upx 0;
//     padding: 20upx;
//     width: 100%;

//     .nav-item {
//       display: flex;
//       .cover {
//         position: relative;
//         width: 38vw;
//         height: 19vw;
//         background-size: 100% 100%;
//         background-repeat: no-repeat;
//       }
//       .info {
//         width: calc(70vw - 130upx);
//         position: relative;
//         padding-left: 20upx;
//         margin-top: 0;
//         .title {
//           font-size: 24upx;

//           font-weight: normal;
//         }
//         .brief {
//           line-height: 30upx;
//           font-size: 24upx;
//         }
//         .tag-list {
//           .tag {
//             margin-right: 6upx;
//           }
//         }
//         .tag-time {
//           margin-top: 4upx;
//           position: absolute;
//           left: 20upx;
//           bottom: 0;
//           right: 10upx;
//           font-size: 22upx;
//           color: #999999;
//         }
//       }
//     }
//   }
// }
</style>
